<template>
	<view class="qaBox">
		<view class="">
			<view :class="[
				{ watchMoreContent: isWatchMore },
				{ contentt: isLongContent },
				'xzj',
			]" :style="[zxy, textStyle]">
				<view @click="watchMore">
					<slot></slot>
				</view>

			</view>
			<!-- <view class="watchMore" v-if="isLongContent && isPopup" @click="watchMore">{{ isWatchMore ? "收起" : "全部" }}
			</view> -->
			<view class="watchMore" v-if="isLongContent && !isPopup" @click="watchMore">全部</view>

			<uni-icons class="watchMore" v-if="isLongContent && isPopup" @click="watchMore" type="right" color="#c0c4cc"
				size="8"></uni-icons>

		</view>
			<uni-popup ref="popup" background-color="#fff" class="popcontainer">
				<view class="popup-content">
					<scroll-view scroll-y style="max-height: 600rpx">
						<view style="text-align: center; font-weight: bold" v-if="title">{{ title }}</view>
						<view style="font-size: 24rpx">
							<slot name="content"></slot>
						</view>
					</scroll-view>
				</view>
			</uni-popup>
	</view>
</template>
<script>
export default {
	data() {
		return {
			isWatchMore: false,
			isLongContent: false,
			zxy: {
				"-webkit-line-clamp": "" /* 行数*/,
				lineClamp: "" /*行数*/,
			},
			sheight: null,
			domHeight: null
		};
	},
	props: {
		isPopup: {
			type: Boolean,
			default: false,
		},
		title: {
			type: String,
			default: "",
		},
		typeValue: {
			type: Number,
			default: 1,
		},
		showHeight: {
			//文本本身高度超出   showHeight  才会显示 查看更多
			type: [Number, String],
			default: 74,
			// 这里是rpx
		},
		hideLineNum: {
			type: [Number, String],
			default: 4,
			// 4行
		},
		textStyle: {
			type: Object,
			default: () => { },
		},
	},
	mounted() {
		this.$nextTick(function () {
			this.init();
			for (let key in this.zxy) {
				this.zxy[key] = this.hideLineNum;
			}
		});
	},
	created() {

	},
	methods: {
		watchMore() {
			if (!this.isPopup || !this.isLongContent) {
				this.isWatchMore = !this.isWatchMore;
			} else {
				this.$refs.popup.open();
			}
		},
		closeDialog() {
			this.$refs.popup.close();
		},
		init() {
			this.getHeight(".xzj").then((res) => {
				this.domHeight = res.height
				if (res.height >= uni.upx2px(this.showHeight)) {
					this.isLongContent = true;
				}
			});
		},
		getHeight(selector, all) {
			return new Promise((resolve) => {
				uni
					.createSelectorQuery()
					.in(this)[all ? "selectAll" : "select"](selector)
					.boundingClientRect((rect) => {
						if (all && Array.isArray(rect) && rect.length) {
							resolve(rect);
						}
						if (!all && rect) {
							resolve(rect);
						}
					})
					.exec();
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.qaBox {
	text-align: right;
	font-size: 24rpx;
	font-weight: 400;
	// margin-top: 14rpx;
	color: #fff;
	display: flex;
	position: relative;
	width: 100%;

}


.contentt {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	//   text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	position: relative;
	line-height: 1.5;

	//   &::after {
	//     content: '';
	//     position: absolute;
	//     right: 0;
	//     bottom: 0;
	//     width: 160rpx;
	//     height: 1.5em; 
	//     pointer-events: none;
	//     z-index: 1;
	//   }
}

.watchMore {
	top: 50%;
	position: absolute;
	right: -12rpx;
	transform: translateY(-50%);
	border: 1rpx solid #ccc;
	border-right: none;
	border-top-left-radius: 6rpx;
	border-bottom-left-radius: 6rpx;
	padding: 6rpx 0;
	z-index: 2;
	//   padding-left: 20rpx;
	line-height: 1.5em;
}


.xzj {
	font-size: 28rpx;
	// text-align;
	color: #fff;
	/* #ifdef MP */
	color: #000;
	/* #endif */
	text-align: left;
	word-break: break-all;

}

.watchMoreContent {
	display: inline-block;
	width: 100%;
}


/deep/ .popup-content {
	text-align: left;
	padding: 15px;
	background-color: #fff;
	width: 590rpx;
	margin: 0 auto;
	border-radius: 12rpx;
	position: relative;
	z-index: 999;
	color: #000;
	font-size: 28rpx;
}

/deep/ .uni-popup .uni-popup__wrapper {
	border-radius: 25rpx;
	overflow: hidden;
}

/* #ifdef H5 */
/deep/ uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	display: none;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
	color: transparent;
}

/* #endif */
</style>
